import { View , Button } from '@tarojs/components'
import './index.scss'
import { useRef, useState } from 'react'

function Array() {
  const [arr, setArr] = useState<any[]>([1, 2, 3])
  const [arr1, setArr1] = useState<any[]>([])
  const [arr2, setArr2] = useState<any[]>([4, 5, 6])
  const [arr3, setArr3] = useState<any[]>([])
  const [delete_, setDelete] = useState('none')
  const delref = useRef('none') // none pop shift

  const countRef = useRef(arr.length)
  

  function _push() {
    countRef.current += 1
    arr.push(countRef.current)
    setArr([...arr])
  }
  function _pop() {
    setDelete('pop')
    delref.current = 'pop'
  }
  function _shift() {
    setDelete('shift')
    delref.current = 'shift'
  }
  function _unshift() {
    countRef.current += 1
    arr.unshift(countRef.current)
    setArr([...arr])
  }
  function _sort() {
    setDelete('sort')
    delref.current = 'sort'
  }

  function restore() {
    if (delref.current === 'shift') {
      arr.shift()
      setArr([...arr])
    }
    if (delref.current === 'pop') {
      arr.pop()
      setArr([...arr])
    }
    if (delref.current === 'sort') {
      arr.sort((a,b) =>(a-b))
      setArr([...arr])
    }
    setDelete('none')
    delref.current = 'none'
  }
  function _fliter() {
    let data = arr.filter((item) =>(item > 3))
    setArr1(data as any)
  }
  function _concat() {
      setArr3(arr.concat(arr2))
  }
  //原数组数据发生变化，地址也要变，否则页面不会重新渲染
  function _splice() {
    arr.splice(1, 1)
    //给数组一个新地址
    setArr3([...arr])
    // setArr3(arr as any)
    console.log(arr)
  }
  function _splice2() {
    arr.splice(1, 0,'pink')
    setArr3([...arr])
  }
  function _includes() {
    return arr.includes(10)
  }
  function _reduce() {
    return arr.reduce((total, num) =>{return total += num},0)
  }


  return(
    <View className='index'>
      <View className='annotation'>操作数组末尾方法(成本低)</View>
      <Button onClick={_push}>push在数组末尾添加数据</Button>
      <Button onClick={_pop}>pop删除数组最后一个</Button>
      <View className='annotation'>操作数组最前面的方法(后面都要变，成本高)</View>
      <Button onClick={_unshift}>unshift在数组最前面添加数据</Button>
      <Button onClick={_shift}>shift删除数组第一个</Button>
      <View className='way'>
        {
          arr.map((item, index) => {
           let classname = `box-container`
            if (index === 0 && delref.current == 'shift') {
              classname = `box-container c-delete`
            }
            if (index == arr.length - 1 && delref.current == 'pop') {
              classname = `box-container c-delete`
            }
            if ( delref.current == 'sort') {
              classname = `box-container c-delete`
            }
            
            return (
              <View className={classname} onTransitionEnd={restore}>
                <View className='box'>{item}</View>
                <View className='number'>{index}</View>
              </View>
            )
          })
        }
      </View>
      <Button onClick={_sort}>sort 排序:从小到大</Button>
     <View className='way'>
        {
          arr1.map((item, index) => (
            <View className='box-container' onTransitionEnd={restore}>
              <View className='box'>{item}</View>
              <View className='number'>{index}</View>
            </View>
          ))
        }
     </View>
      <Button onClick={_fliter}>filter 过滤arr 中大于 3 的</Button>
      <View className='way'>
        {
          arr3.map((item, index) => (
            <View className='box-container' onTransitionEnd={restore}>
              <View className='box'>{item}</View>
              <View className='number'>{index}</View>
            </View>
          ))
        }
      </View>
      <Button onClick={_concat}>concat 合并数组arr和arr2</Button>
      <Button onClick={_splice}>splice从索引 1 删除一个</Button>
      <Button onClick={_splice2}>splice从索引 1 添加pink</Button>
      <View className='annotation'>splice 三个参数，1：从索引几开始，2：删除多少个，3：添加的内容，第二个参数不写默认删除索引后面的所有数据，返回被删除的数据</View>
      <Button onClick={_includes}>includes判断数组是否包含10: {_includes() ? '包含' : '不包含'}</Button>
      <Button onClick={_reduce}>reduce计算数组相加后的总和： {_reduce()}</Button>
    </View>
  )
}

export default Array

// [1][2][3][4][5]
// 0  1  2  3  4
//删除中间的索引往前
//改变数组，上面盒子跟着变化
//删除动画，删除时往上移动慢慢透明，完全透明后删除
//数组里面修改原数组的apl
// 熟悉操作数组的方法  push  pop  map  shift  unshift  filter includes reduce  concat  sort forEach,splice




var arr = [1, 2, 3]
var arr2 = [{ g: 100, b: 2 }, { g: 800, b: 2 }, { g: 200, b: 2 }]

var ar =arr.reduce((total,item) => total +=item , 0)
// var ar1 =arr.reduce((total,item) => console.log(total) )
// console.log(ar)
// 叠加
var total = arr2.reduce((pre, item) => ({ a: pre.a + item.g }), {a: 0})


const a = () => {
  return {
    number: 20
  }
}

// const a = () => 20
const b = () => ({number: 20})